<template>
    
    <div id="max" style="display: flex;flex-direction: column;">
        <div v-for="(v1,i1) in gameMap" :key="i1" style="width: 100%;height: 5%;display: flex;flex-direction: row;">
            <div v-for="(v2,i2) in v1" 
            :key="i2"
            style="width: 5%;height: 100%;" @click="doGame(i1,i2)"
            class="Game_Empty"
            v-bind:id="i1+'-'+i2"
            
            >
        
            </div>
        </div>
    </div>
    

</template>



<script>
    import {getData} from "@/network/sendRequest.js";
    export default{
		name:"GameRoom",
		components:{
		},
		computed:{
		
		},
		data(){
            return{
                gameMap: this.initGame(),
                demo: true,
                socket:null
            }
		},
		methods:{	
            initGame(){
                let initGame = [];
                for(let i=0 ; i<16 ;i++){
                    let l_game = [];
                    for(let j =0 ; j<16 ; j++){
                        l_game.push(0);
                    }
                    initGame.push(l_game);
                }
                return initGame;
            },
            doGame(windex,hindex){
                this.demo = !this.demo;
                //向后台发送落字数据
                this.sendGameMsgbySocket(windex,hindex);
            },
            sendGameMsgbySocket(windex,hindex){
                console.log("动作")
                let url = '/game/goBangIng'
                getData(url,{"windex":windex,"hindex":hindex},'post');
                //这里暂且让他直接落子成功 ，之后应该改为后台响应成功再落字成功
                // app.gameMap[windex][hindex] = 1;
                // console.log(app.gameMap)
                // send_message.message = 'game@wIndex:'+windex+';hIndex:'+hindex+";userIndex:"+userIndex;
                // socket.send(JSON.stringify(send_message));
            },
            buildGameRequestParam(from,to,cmd,createTime,msgType,chatType,groupId,content,extras){
                // "from": "来源ID",
                // "to": "目标ID",
                // "cmd":"命令码(11)int类型",
                // "createTime": "消息创建时间long类型",
                // "msgType": "消息类型int类型(0:text、1:image、2:voice、3:vedio、4:music、5:news)",
                // "chatType":"聊天类型int类型(0:未知,1:公聊,2:私聊)",
                // "groupId":"群组id仅在chatType为(1)时需要,String类型",
                // "content": "内容",
                // "extras" : "扩展字段,JSON对象格式如：{'扩展字段名称':'扩展字段value'}"
                return {
                    "from": from,
                    "to": to,
                    "cmd":cmd,
                    "createTime": createTime,
                    "msgType": msgType,
                    "chatType":chatType,
                    "groupId":groupId,
                    "content": content,
                    "extras" : extras
                }
            },
            initSocket(){
                getData('/game/getServer',{"token":"111"},'post').then(res =>{

                    this.socket = new WebSocket(res);
                    this.socket.onmessage = function(event){
                        console.log("收到消息")
                    };

                    // 连接成功
                    this.socket.onopen = function(event){
                        console.log("连接成功")
                        //app.commonMsg.push("WebSocket已成功连接！");
                        //socket.send('游戏已连接');
                        // ws.register();
                    }

                    this.socket.onclose = function(event){
                        console.log("WebSocket已关闭...");
                    };
                })

                
            }
        } ,
        created() {
            this.initSocket();
        },
        mounted() {

        }
    }
</script>
<style scoped>
    html,body{
        width: 100%;
        height: 100%;
    }
    #max{
        width: 1300px;
        height: 1300px;
    }
    div{
        border: 0px solid black;
    }
    .Game_Empty{
        /* background-color: white; */
        cursor: pointer;
        background: url('../../assets/gameImg/dobangbg.jpg') center  center ;
        background-size: 100% 100%;
    }
    .Game_Empty:hover{
        background: url('../../assets/gameImg/gobanghover.jpg') center  center ;
        background-size: 100% 100%;
    }
    .Game_UseA{
        background-color:wheat;
        cursor: none;
    }
    .Game_UseB{
        background-color: turquoise;
    }
</style>
